<template>
  <div class="person-info">
    <div class="info-box">
      <div class="info-form">
        <div class="info-input">
          <el-input placeholder="请输入你的姓名" v-model="studentName" clearable @clear="clearInput"></el-input>
        </div>
        <div class="info-opt">
          <el-button type="primary" @click="fetchStudentNo">查询</el-button>
        </div>
      </div>
      <div class="info-panel">
        <div v-if="studentNo" @click="copyToBoard" :data-clipboard-text="studentNo">你的学号: {{ studentNo }}</div>
        <div v-else>上方未检索</div>
        <div v-if="studentNo">（点击复制你的学号到剪贴板）</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import useClipboard from 'vue-clipboard3'
import { ElMessage } from 'element-plus'
import studentData from '@/baseData/student.json'

const studentName = ref('')
const studentNo = ref('')

const fetchStudentNo = () => {
  if (!studentName.value) {
    ElMessage.warning('请输入你的姓名')
    return
  }
  const student = studentData.find(student => student.name === studentName.value)
  studentNo.value = student ? student.student_id : ''
}
const clearInput  = () => {
  studentName.value = ''
  studentNo.value = ''
}
/* 复制学号 */
const { toClipboard } = useClipboard()


 const copyText = ref('你看这里能复制吗？')

 const copyToBoard = async () => {
  copyText.value = studentNo.value
   try {
     await toClipboard(copyText.value)
     ElMessage.success('复制成功！')
   } catch (e) {
     console.error(e)
   }
 }
</script>

<style lang="less" scoped>
.person-info {
  width: 100%;
  height: 100%;
  .info-box {
    width: 100%;
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .info-panel {
      text-align: left;
      margin: 20px 0;
      padding: 10px;
      border: 1px dashed #ccc;
      min-height: 100px;
    }
  }
  .info-form {
    display: flex;
    .info-input {
      flex: 1;
    }
    .info-opt {
      margin-left: 10px;
    }
  }
}

:deep(.el-button:hover){
  background-color:#409eff;
}
</style>
